<template>
	<view>
		<u-swipe-action :options="optionList" btn-width="120" 
			v-for="(itme,index) in booklist">
			<view class="u-body-item" @click="tabinfo">

				<view class="img_box">

					<view class="ranking" :class="{one:index == 0,two:index == 1,three:index == 2}" v-if="isRanking">
						<view class="icon"><u-icon name="bookmark"></u-icon></view>
						TOP&nbsp;{{index+1}}
					</view>
					<view class="images"><u-lazy-load :image="itme.image" threshold="300" border-radius="6"
							mode="aspectFill"></u-lazy-load></view>

					<!-- <image class="images" :src="itme.image"></image> -->
				</view>

				<view class="content">
					<view class="booktitle">
						<view>{{ itme.name }}</view>
						<view style="position: absolute;right:120rpx;margin-right: 30rpx;">
							<u-tag v-if="itme.update" style="margin-right: 10rpx;" text="更新" type="error" mode="dark"
								size="mini" />
							<u-tag v-if="itme.reading" style="margin-right: 10rpx;" text="上次阅读" mode="dark"
								size="mini" />
						</view>
					</view>
					<view class="bookcontent u-line-2">
						更新至：{{ itme.newestname }}
					</view>
					<view class="bookfoot">
						<view class="msg u-type-info-dark">
							<u-icon name="bookmark" color="u-type-info-dark"></u-icon>
							{{ itme.read ==0 ?'未读' : '已读'+itme.read+'章' }}
						</view>
					</view>
				</view>
			</view>
		</u-swipe-action>
	</view>
</template>

<script>
	export default {
		props: ["book", "ranking", "options"],
		data() {
			return {
				optionList: this.options || [],
				isRanking: this.ranking || false,
				booklist: this.book || []
			}
		},
		methods: {
			tabinfo() {
				this.$u.route({
					url: 'pages/book/bookinfo'
				})
			},
			touchstart(index) {
				console.log(index)
				return false;
			},
			gopage(url) {
				console.log(url);
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-body-item {
		display:flex;
		height: auto;
		width: 100%;
		margin-left: 30rpx;
		margin-bottom: 20rpx;
		color: #333;
		overflow: hidden;

		.img_box {
			position: relative;

			.ranking {
				position: absolute;
				left: -50rpx;
				top: 0;
				width: 100%;
				text-align: center;
				z-index: 888;
				color: #fff;
				transform: rotate(-45deg);
				background-color: #4284ed;
			}

			.ranking {
				font-size: 20rpx;
				line-height: 30rpx;
				background-color: #969ba3;

				&.one {
					background-color: #e73500;
				}

				&.two {
					background-color: #f0643a;
				}

				&.three {
					background-color: #f0c53a;
				}
			}
		}

		.content {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-left: 30rpx;
			margin-right: 30rpx;

			.booktitle {
				display: flex;
				padding-top: 5rpx;
				font-size: 30rpx;
				line-height: 40rpx;
			}

			.bookcontent {
				color: #82848a;
				font-size: 25rpx;
			}

			.bookfoot {
				align-items: flex-end;
				display: flex;
				justify-content: space-between;
				width: 100%;

				.msg {
					font-size: 12px;
				}
			}
		}
	}

	.u-body-item .images {
		width: 150rpx;
		flex: 0 0 150rpx;
		height: 200rpx;
	}
</style>